import { useEffect, useState } from 'react';
import { Layout, Carousel, Card } from 'antd';
const { Sider, Content } = Layout;
import { FolderAddOutlined, DatabaseOutlined, HarmonyOSOutlined, JavaScriptOutlined, JavaOutlined, LinuxOutlined, CodeOutlined, ChromeOutlined, KubernetesOutlined, DockerOutlined, BookOutlined } from '@ant-design/icons';
import { Menu } from 'antd';
import Logo from '../../components/Icons';
import { useNavigate } from "react-router-dom";
import LoginStore from '../../store/Login/index';
import { ArticlesCard, UserInfoCard } from '../../components/Home/ArticlesCard';
import { Empty } from 'antd';
//apis
import { GetArticleList, GetArticleSeriesById } from '../../api/Home/index';
import { ArticlesDetail } from '../../components/Home/ArticlesDetail';
import SystemMessage from '../../components/Home/SystemMessage';
import ArticleSeries from '../../components/Home/ArticleSeries';
import Mine from '../../components/Home/Mine';
import ThumbsUpList from '../../store/Home';
import HotArticle from '../../components/Home/HotArticle';

const contentStyle = {//中间部分
  padding: '30px',
  textAlign: 'center',
  minHeight: 120,
  color: 'black',
  backgroundColor: 'white',
  marginLeft: '10px',
  marginRight: '10px',
  maxHeight: 'calc(100vh)', /* 根据布局调整 */
  overflowY: 'scroll',
  position: 'relative',
};

const siderStyle = {//左边和右边
  textAlign: 'center',
  backgroundColor: 'white',
};

const layoutStyle = {//全局
  width: '100%',
  padding: '20px',
};

const items = [
  {
    key: 'del-line-1',
    label: '天枢笔迹',
    icon: <Logo />,
  },
  {
    type: 'divider',
  },
  {
    key: '1',
    icon: <CodeOutlined />,
    label: '后端',
    children: [
      { key: '1-1', label: '技术文章', icon: <JavaOutlined /> },
      { key: '1-2', label: '干货内容', icon: <DatabaseOutlined /> },
      { key: '1-3', label: '八股文章', icon: <BookOutlined /> },
    ],
  },
  {
    key: '2',
    icon: <ChromeOutlined />,
    label: '前端',
    children: [
      { key: '2-1', label: '技术文章', icon: <JavaScriptOutlined /> },
      { key: '2-2', label: '干货内容', icon: <HarmonyOSOutlined /> },
      { key: '2-3', label: '八股文章', icon: <BookOutlined /> },
    ],
  },
  {
    key: '3',
    icon: <LinuxOutlined />,
    label: '服务端',
    children: [
      { key: '3-1', label: '技术文章', icon: <KubernetesOutlined /> },
      { key: '3-2', label: '干货内容', icon: <DockerOutlined /> },
      { key: '3-3', label: '八股文章', icon: <BookOutlined /> },
    ],
  },
  {
    type: 'divider',
  },
];
const Home = () => {

  const { list, addThumbsUp } = ThumbsUpList();//获取点赞列表

  useEffect(() => {//挂载函数
    GetArticleList().then(({ data }) => {
      console.log(data.data);

      setArticleList(data.data);
    });

  }, []);

  const navigate = useNavigate();//路由导航实例

  const { userInfo } = LoginStore();//获取用户信息

  const [ArticleList, setArticleList] = useState([]);//文章列表数据存储

  const onChange = (e) => {//左侧菜单栏切换事件
    console.log('click ', e);

  };

  const [HomeStatus, setHomeStatus] = useState(1);//1.推荐,2.热门,3.消息,4.我的,5.所属系列,6.文章详细

  const [ArticleId, setArticleId] = useState();//当前文章id

  const HandlerClickToArticle = (id) => {
    setHomeStatus(6);
    setArticleId(id);
  };

  return (
    <Layout style={layoutStyle}>
      <Layout>
        <Sider width="25%" style={siderStyle}>
          <Menu
            onClick={onChange}
            style={{ width: '100%', marginTop: '50px' }}
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            mode="inline"
            items={items}
          />
        </Sider>
        <Content style={contentStyle}>
          {HomeStatus === 1 ? <div style={{ marginTop: '50px' }}>
            <Carousel autoplay>
              <div style={{ width: '100%' }}>
                <img style={{ width: '100%' }} src="http://192.168.44.133:9000/skyhub-bucket/banner/20240205_17414899.jpg" alt="" />
              </div>
              <div style={{ width: '100%' }}>
                <img style={{ width: '100%' }} src="http://192.168.44.133:9000/skyhub-bucket/banner/20240205_17520761.jpg" alt="" />
              </div>
              <div style={{ width: '100%' }}>
                <img style={{ width: '100%' }} src="http://192.168.44.133:9000/skyhub-bucket/banner/20240205_17521663.jpg" alt="" />
              </div>
              <div style={{ width: '100%' }}>
                <img style={{ width: '100%' }} src="http://192.168.44.133:9000/skyhub-bucket/banner/20240205_17522461.png" alt="" />
              </div>
            </Carousel>
            <div className='card-container' style={{ marginTop: '20px' }}>
              {
                (ArticleList.length === 0) ? <Empty /> : ArticleList.map((item) => {
                  return (
                    <ArticlesCard
                      key={item.id}
                      ArticleItem={item}
                      clickToArticle={() => {
                        setHomeStatus(6);//设置home页面状态
                        setArticleId(item.id);//设置文章id
                      }}
                      clickToSeries={() => {
                        setHomeStatus(5);
                        setArticleId(item.id);//设置文章id
                      }}
                    />
                  )
                })
              }
            </div>
          </div> : ''
          }
          {
            HomeStatus === 2 ? <HotArticle /> : ''
          }
          {
            HomeStatus === 3 ? <SystemMessage back={() => { setHomeStatus(1); }} /> : ''
          }
          {
            HomeStatus === 4 ? <Mine /> : ''
          }
          {
            HomeStatus === 5 ? <ArticleSeries
              ArticleId={ArticleId}
              back={() => {
                setHomeStatus(1);
              }}
              clickToArticle={(id) => {
                HandlerClickToArticle(id)
              }}
            /> : ''
          }
          {
            HomeStatus === 6 ? <ArticlesDetail
              ArticleId={ArticleId}
              back={() => {
                setHomeStatus(1)
              }} /> : ''
          }
          <Card
            style={{//底部tab栏
              marginTop: '20px',
              width: '43.5vw',
              borderRadius: '10px',
              padding: '5px',
              // bottom: '0px',
              // left: '50%', // 水平居中
              // transform: 'translateX(-50%)', // 精确水平居中
              // zIndex: 1000, // 设置层级，确保覆盖在内容上
              // backgroundColor: 'white', // 背景色防止透明
            }}

          >
            <div style={{
              width: '100%',
              display: 'flex',
              justifyContent: 'space-between'
            }}>
              <p className={HomeStatus === 1 ? `text-blue-600` : ''} onClick={() => { setHomeStatus(1) }}>推荐</p>
              <p className={HomeStatus === 2 ? `text-blue-600` : ''} onClick={() => { setHomeStatus(2) }}>热门</p>
              <FolderAddOutlined style={{ fontSize: '25px' }} onClick={() => { navigate('/upload'); }} />
              <p className={HomeStatus === 3 ? `text-blue-600` : ''} onClick={() => { setHomeStatus(3) }}>消息</p>
              <p className={HomeStatus === 4 ? `text-blue-600` : ''} onClick={() => { setHomeStatus(4) }}>我的</p>
            </div>
          </Card>
        </Content>
        <Sider width="25%" style={siderStyle}>
          <UserInfoCard
            avatar={userInfo.avatar}
            username={userInfo.username}
            office={userInfo.office}
            createTime={userInfo.createTime}
            email={userInfo.email}
          />
        </Sider>
      </Layout>
    </Layout>)
};
export default Home;